<template>
  <div>
    <button @click="toggleSlide">{{ isSlid ? '返回' : '滑动' }} 盒子</button>
    <div :class="['box', { slid: isSlid }]"></div>
  </div>
</template>

<script>
export default {
  name: 'slideView',
  data() {
    return {
      isSlid: false, // 控制盒子是否滑动
    }
  },
  methods: {
    toggleSlide() {
      this.isSlid = !this.isSlid // 切换滑动状态
    },
  },
}
</script>

<style lang="scss" scoped>
.box {
  width: 100px;
  height: 100px;
  margin-top: 10px;
  background-color: #3498db; /* 盒子的背景色 */
  transition: transform 1s; /* 滑动动画 */
  /* 初始位置 */
  transform: translateX(0);
}

.slid {
  transform: translateX(200px); /* 向右滑动200px */
}
</style>
